<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>参数管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8"/>
    <link rel="stylesheet" href="../../../assets/css/font.css">
    <link rel="stylesheet" href="../../../assets/css/xadmin.css">
</head>
<body>

<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
    <ul class="layui-tab-title">
        <li class="layui-this" lay-id="11">网站设置</li>
        <li lay-id="22">用户管理</li>
        <li lay-id="33">权限分配</li>
        <li lay-id="44">商品管理</li>
        <li lay-id="55">订单管理</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">内容1</div>
        <div class="layui-tab-item"><iframe  height="320px" src="../orderHead/orderHeadListTab.html" frameborder="0" scrolling="yes" class="x-iframe" width="100%" height="100%" style="display:block"></iframe></div>\n' +
        <div class="layui-tab-item">内容2</div>
        <div class="layui-tab-item">内容3</div>
        <div class="layui-tab-item">内容4</div>
        <div class="layui-tab-item">内容5</div>
    </div>
</div>


<table class="layui-hide" id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">

    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
</script>
<script type="text/html" id="barDemo1">

    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
</script>
<script type="text/javascript" src="../../../assets/js/lib.js"></script>
<script>
    lib.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'],
        function() {
            var table = layui.table //表格
            //初始表格基础参数
            table.set(common.layui.table.config());
            //执行一个 table 实例
            table.render({
                elem: '#demo',
                height: 570,
                url: common.util.createUrl('/sys/user/list') //数据接口
                ,
                title: '用户表',
                page: true //开启分页
                ,
                cols: [[ //表头
                    {
                        type: 'checkbox',
                        fixed: 'left'
                    },
                    {
                        field: 'userName',
                        title: '用户名',
                        minWidth: 100,
                        event: 'collapse',
                        templet: function(d) {
                            return '<div style="position: relative;\n' + '    padding: 0 10px 0 20px;">' + d.userName + '<i style="left: 0px;" lay-tips="展开"  style="cursor:pointer;" class="layui-icon layui-colla-icon layui-icon-right"></i></div>'
                        }
                    },

                    {
                        field: 'userEmail',
                        title: '城市',
                        width: 150
                    },
                   ]]
            });

            //监听工具条
            table.on('tool(test)',
                function(obj) {
                    var data = obj.data;
                    if (obj.event === 'collapse') {
                        var trObj = layui.$(this).parent('tr'); //当前行
                        var accordion = true //开启手风琴，那么在进行折叠操作时，始终只会展现当前展开的表格。
                        var content = '<table></table>' //内容
                        //表格行折叠方法
                        collapseTable({
                            elem: trObj,
                            accordion: accordion,
                            content: content,
                            success: function(trObjChildren, index) { //成功回调函数
                                //trObjChildren 展开tr层DOM
                                //index 当前层索引
                                trObjChildren.find('table').attr("id", index);
                                table.render({
                                    elem: "#" + index,
                                    url: '/demo/table/user',
                                    limit: 3,
                                    cellMinWidth: 80,
                                    cols: [[{
                                        type: 'checkbox',
                                        fixed: 'left'
                                    },
                                        {
                                            field: 'id',
                                            width: 80,
                                            title: 'ID',
                                            sort: true
                                        },
                                        {
                                            field: 'username',
                                            title: '用户名'
                                        },
                                        {
                                            field: 'sex',
                                            title: '性别',
                                            sort: true
                                        },
                                        {
                                            field: 'city',
                                            title: '城市'
                                        },
                                        {
                                            fixed: 'right',
                                            width: 80,
                                            align: 'center',
                                            toolbar: '#barDemo1'
                                        }]]
                                });

                            }
                        });

                    }
                });

            function collapseTable(options) {
                debugger;
                var trObj = options.elem;
                if (!trObj) return;
                var accordion = options.accordion,
                    success = options.success,
                    content = options.content || '';
                var tableView = trObj.parents('.layui-table-view'); //当前表格视图
                var id = tableView.attr('lay-id'); //当前表格标识
                var index = trObj.data('index'); //当前行索引
                var leftTr = tableView.find('.layui-table-fixed.layui-table-fixed-l tr[data-index="' + index + '"]'); //左侧当前固定行
                var rightTr = tableView.find('.layui-table-fixed.layui-table-fixed-r tr[data-index="' + index + '"]'); //右侧当前固定行
                var colspan = trObj.find('td').length; //获取合并长度
                var trObjChildren = trObj.next(); //展开行Dom
                var indexChildren = id + '-' + index + '-children'; //展开行索引
                var leftTrChildren = tableView.find('.layui-table-fixed.layui-table-fixed-l tr[data-index="' + indexChildren + '"]'); //左侧展开固定行
                var rightTrChildren = tableView.find('.layui-table-fixed.layui-table-fixed-r tr[data-index="' + indexChildren + '"]'); //右侧展开固定行
                var lw = leftTr.width() + 15; //左宽
                var rw = rightTr.width() + 15; //右宽
                //不存在就创建展开行
                if (trObjChildren.data('index') != indexChildren) {
                    //装载HTML元素
                    var tr = '<tr data-index="' + indexChildren + '" class="x-admin-table-collapse"><td colspan="' + colspan + '"><div style="height: auto;padding-left:' + lw + 'px;padding-right:' + rw + 'px" class="layui-table-cell">' + content + '</div></td></tr>';
                    trObjChildren = trObj.after(tr).next().hide(); //隐藏展开行
                    var fixTr = '<tr data-index="' + indexChildren + '"></tr>';//固定行
                    leftTrChildren = leftTr.after(fixTr).next().hide(); //左固定
                    rightTrChildren = rightTr.after(fixTr).next().hide(); //右固定
                }
                //展开|折叠箭头图标
                trObj.find('td[lay-event="collapse"] i.layui-colla-icon').toggleClass("layui-icon-right layui-icon-down");
                //显示|隐藏展开行
                trObjChildren.toggle();
                //开启手风琴折叠和折叠箭头
                if (accordion) {
                    trObj.siblings().find('td[lay-event="collapse"] i.layui-colla-icon').removeClass("layui-icon-down").addClass("layui-icon-right");
                    trObjChildren.siblings('[data-index$="-children"]').hide(); //展开
                    rightTrChildren.siblings('[data-index$="-children"]').hide(); //左固定
                    leftTrChildren.siblings('[data-index$="-children"]').hide(); //右固定
                }
                success(trObjChildren, indexChildren); //回调函数
                heightChildren = trObjChildren.height(); //展开高度固定
                rightTrChildren.height(heightChildren + 115).toggle(); //左固定
                leftTrChildren.height(heightChildren + 115).toggle(); //右固定
            }

        });
</script>
</body>
</html>

